<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit class</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/main.css" >
    <script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="./js/jquery-ui-1.10.4.custom.min.js"></script>
    <style>
    .ui-selecting, .ui-selected { background: lightBlue; }
    .ui-selected-full { background: lightGreen;}
    .messagepop {
        display: none;
        width: 170px;
        height: 60px;
        position: absolute;
        background: #fff;
        padding: 20px 15px;
        box-shadow: 1px 1px 3px #BBBBBB;
    }
    .messagepop table tbody tr td{
        padding: 5px;
    }
    </style>
</head>
<body>
    <div id="header">
            
    </div><!-- header -->
    
    <div class="container">
        <div class="main-left">
        <div class="main-right">
            <div class="main">
                <div class="nav">
                    <ul>
                        <li>
                            <a id="tab" href="#">Classes</a>
                            <span class="courses-button">▼</span>
                            <ul class="courses-dd" id="tab">
                                <li><a href="#">Software Engineering</a></li>
                                <li><a href="#">Operating Systems</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Help</a></li>
                    </ul>
                </div><!-- nav end-->
                
                <div class="content">
                    <div class="offset">
                        <div class="left">
                            <table class="crumbs">
                                <tbody>
                                    <tr>
                                        <!-- change java code here -->
                                        <td class="first">
                                            <a href="#">
                                                Classes
                                            </a>
                                        </td>
                                        <td>→</td>
                                        <td class="first"><a href="#">Software Engineering</a></td>
                                        <td>→</td>
                                        <td class="last"><em>Edit class settings</em></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="page-left">
                                                                <table class="calendar">
                                                                    <thead>
                                                                        <tr>
                                                                            <th></th>
                                                                            <th data-col="0">Monday</th>
                                                                            <th data-col="1">Tuesday</th>
                                                                            <th data-col="2">Wednesday</th>
                                                                            <th data-col="3">Thursday</th>
                                                                            <th data-col="4">Friday</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <tr>
                                                                            <td>09:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>10:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>11:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>12:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>13:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>14:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>15:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>16:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td>17:00</td>
                                                                            <td data-col="0"></td>
                                                                            <td data-col="1"></td>
                                                                            <td data-col="2"></td>
                                                                            <td data-col="3"></td>
                                                                            <td data-col="4"></td>
                                                                        </tr>

                                                                    </tbody>
                                                                </table>
                                </div>
                                <div class="clear"></div>
                                <div class="messagepop pop">
                                    <form method="post" id="new_message" action="/messages">
                                    <table>
                                        <tbody class="pop-table">
                                            <tr>
                                                <td class="label">Choose clasroom</td>
                                                <td>
                                                    <select id="classroom">
                                                        <option value="A1">A1</option>
                                                        <option value="A2">A2</option>
                                                        <option value="B1">B1</option>
                                                        <option value="B2">B2</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                <button class="btn-green"value="Add" name="submit" id="pop_submit"><span>Add</span></button> or <a id="pop_cancel" href="#">Cancel</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </form>
                                </div>
                            
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-fade">
                            <div class="right-time">
                                <span class="time round-3">
                                    Monday, Apr 14th, 
                                    <abbr id="current-time">10:14am</abbr>
                                </span>
                            </div>
                            <div class="right-classes">
                                <h2>Your classes</h2>
                                <ul class="courses_ul">
                                    <li class="course_li" id="course_123123">
                                        <a id="course_123123" class="course" href="#">
                                        Software Engineering
                                        </a>
                                    </li>
                                    <li class="course_li" id="course_123123">
                                        <a id="course_123123" class="course" href="#">
                                        Operating Systems
                                        </a>
                                    </li>
                                </ul>
                                <div class="clear"></div>
                                <a href="#">Add a class</a>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                            <div class="right-extras">
                                <h2>Support</h2>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

            </div>
            <div class="clear"></div>
        </div>
        </div>
        <div class="clear"></div>
    </div><!-- container end-->

    <div id="footer">
        
    </div>
    
    

</body>
</html>